<template>
  <div class="render-func">
    <Row class="title-top mb-20">
      <h2 class="title">JSX正是为了虚拟DOM而存在的语法糖</h2>
      <div>
        <p>
          1、React核心机制之一就是可以创建虚拟的DOM元素，利用虚拟Dom来减少对实际DOM的操作从而提升性能
        </p>
        <p>
          2、 JSX用一种类似HTML的语法替代了比较繁琐的React.createElement纯JS方法，而
          <label class="text">@babel/preset-react插件</label>
          就起到了最关键的一步：负责在webpack编译时，把所有的JSX都改成React.createElement
        </p>
      </div>
      <!--JSX函数式组件 -->
      <!-- <BaseDiv :render="renderFunc"></BaseDiv> -->
    </Row>
    <Row>
      <h2 class="title mb-5">函数式组件，什么时候去使用函数式组件?</h2>
      <!--函数式组件,原生写法: -->
      <render-props-fun :items="propsFunItems" @itemCheck="itemCheck"></render-props-fun>
    </Row>
  </div>
</template>
<script lang="tsx">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import BaseDiv from "@components/iv-render/BaseDiv.ts";
import RenderPropsFun from "@views/RenderPropsFun.vue";

@Component({
  components: {
    BaseDiv,
    RenderPropsFun
  }
})
export default class RenderFunc extends Tools {
  private get propsFunItems() {
    return [
      {
        id: "1",
        name: "JAVA",
        age: 18
      },
      {
        id: "2",
        name: "Oracle",
        age: 25
      },
      {
        id: "3",
        name: "Vue",
        age: 14
      }
    ];
  }
  /**
   * 函数式jsx组件,即JSX是React.createElement这个方法的语法糖
   * JSX绑定事件,给事件传值的话需要这么写，this.clickHandler.bind(this,data)，JS操作的部分要用{}，DOM结构用()
   * 报错: Error in v-on handler: "TypeError: handler.apply is not a function"
   * 错误原因是添加了双引号,导致this捕获不到:<div onclick="{this.clickHandler.bind(this)}">
   * 解决方案: this.clickHandler.bind(this) or onclick={() => { alert("hello world")}}
   */
  private renderFunc(h) {
    // return (
    //   <div
    //     onclick={() => {
    //       alert("JSX绑定自定义事件");
    //     }}
    //   >
    //     <h1>Hello, world</h1>
    //   </div>
    // );
  }

  private clickHandler() {
    alert("JSX绑定自定义事件");
  }

  /**
   * 触发事件
   */
  private itemCheck(item) {
    let msg = `我的名字叫: ${item.name}, 今年${item.age}岁了`;
    console.log(msg);
  }
}
</script>
<style lang="stylus" scoped>
.render-func {
  .title {
    font-size: 12px
    font-weight: 700
    color: #f19000
  }
  .text {
    font-size: 12px
    font-weight: 700
    color: red
  }
}
</style>
